import request from '../../../utlis/request';
<template>
  <div class="cannel-edit">
    <div class="my-cannel">
      <!-- =={{ activeIndex }}=={{myChannels}} -->
      <van-cell title="我的频道">
        <van-button
          @click="isEdit = !isEdit"
          type="danger"
          round
          size="small"
          >{{ !isEdit ? "编辑" : "完成" }}</van-button
        >
      </van-cell>

      <!-- 显示我的频道 -->
      <van-grid :gutter="5" :border="false">
        <van-grid-item
          :class="{ active: activeIndex == index }"
          v-for="(channel, index) in myChannels"
          :key="index"
        >
          <i @click="btnShow(index)" slot="text">{{ channel.name }}</i>
          <van-icon
            @click="delMyChannels(channel, index)"
            v-if="isEdit"
            slot="icon"
            name="clear"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="tj-cannel">
      <van-cell title="推荐频道"></van-cell>
      <!-- 显示推荐频道 -->
      <van-grid :gutter="5" :border="false">
        <van-grid-item
          @click="addChannels(channel)"
          v-for="(channel, index) in tjChannels"
          :key="index"
          icon="plus"
          :text="channel.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { channelsAllApi, deleteUserChannelApi } from "@/api";

import { mapState } from "vuex";
import { setItem } from "../../../utlis/storage";

export default {
  props: {
    myChannels: {
      type: Array,
      default: () => {
        return [];
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      allChanels: [],

      //编辑和完成状态的控制
      isEdit: false,
      fiexChannel: [0,14]
    };
  },
  name: "",
  created() {
    this.getCannelsData();
  },

  computed: {
    ...mapState(["user"]),
    //  获取推荐频道
    tjChannels() {
      return this.allChanels.filter(chanels => {
       return  !this.myChannels.find(item => {
          return item.id == chanels.id; //   find的返回值  只要满足条件就终止
        });
      });


      // var unFind = [];
      // return this.allChanels.filter(chanels => {
      //   var reg = this.myChannels.find(item => {
      //     return item.id == chanels.id; //   find的返回值  只要满足条件就终止
      //   });
      //   console.log(reg,6667788);
      //   //  获取的是找不到的
      //   if (!reg) {
      //     //  将没有找到的追加到  unFind   数组中
      //     unFind.push(chanels);
      //     return unFind; //  他是filter的返回值
      //   }
      // });
      //return qq; // 这里是computed中函数的返回值
    }
  },
  methods: {
    //  获取所有频道
    async getCannelsData() {
      const { data: res } = await channelsAllApi();
      console.log(res, 45555);
      this.allChanels = res.data.channels;
    },

    /* 点击我的频道按钮  关闭对话框  并且显示点击的高亮 */
    btnShow(index) {
      //  关闭对话框 的这个属性在父组件中  需要向父组件进行传值
      this.$emit("popupshow", index);
    },

    /* 点击删除我的频道 */
    async delMyChannels(channel, index) {
      /* 
      判断  fiexChannel  中的值和 myChannels的每一项的id进行匹配  
      如果有匹配成功  就表示不能删除，否则可以删除
      
      */
      //console.log(channel.id, this.fiexChannel.includes(channel.id), 88888);

      //return;
      //  if(this.myChannels.includes(this.fiexChannel[0])){

      //  }

      //  fiexChannel  ===[0]

      if (this.fiexChannel.includes(channel.id)) {
        return;
      }

      /* 
      +  删除
      + 分删除的是高亮前面的还是后面的   
      + 根据是否登录  
        —  如果登录就发请求 没登录就做本地缓存
      */
      this.myChannels.splice(index, 1);

      /* 
    +  点击当前频道
        + 获取当前频道的索引
        + 根据索引和activeIndex  进行判断
          如果  index<=activeIndex  表示点击的是当前高亮的前面频道或者是自己   
          将  activeIndex=activeIndex-1
      */
      if (index <= this.activeIndex) {
        this.$emit("activeindexfunc", this.activeIndex - 1);
      }

      if (this.user) {
        //  已经登录   发送请求
        const { data: res } = await deleteUserChannelApi(channel.id);
        console.log(res, 444444);
      } else {
        //  未登录  不需要发送请求 需要做本地缓存

        setItem("myChannels", this.myChannels);
      }
    },

    /* 添加频道 */
    addChannels(channel) {
      console.log(channel, 55544333);
      this.myChannels.push(channel);

      if (this.user) {
        //  已经登录   发送请求
        //const {data:res}=await deleteUserChannelApi(channel.id)
       // console.log(res, 444444);
      } else {
        //  未登录  不需要发送请求 需要做本地缓存

        setItem("myChannels", this.myChannels);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.cannel-edit {
  padding: 85px 0px;
  .my-cannel {
    /deep/.van-cell {
      align-items: center;
    }

    /deep/.van-icon-clear {
      position: absolute;
      top: -40px;
      right: -90px;
      font-size: 12px;
    }

    /deep/.van-grid-item__content {
      background-color: #f4f5f6;
      font-size: 12px;
      padding: 20px 10px;

      span {
        margin: 0;
        font-size: 12px;
      }
    }
  }
  .tj-cannel {
    /deep/.van-grid-item__content {
      background-color: #f4f5f6;
      flex-direction: row;
      span {
        margin: 0;
        font-size: 12px;
      }

      /deep/.van-icon-plus {
        font-size: 12px;
      }
    }
  }

  .active {
    color: red;
  }
}
</style>
